<template>
  <el-dialog
      title="身份验证"
      :visible="dialogVisible"
      width="30%">
    <el-row>为了保护你的帐号安全，请验证身份，验证成功后进行下一步操作</el-row>
    <el-row style="margin-top: 10px;">
      <el-input type="password" v-model="input" @keyup.native.enter="check" placeholder="请输入密码"></el-input>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="check" :loading="loading">验 证</el-button>
      <el-button @click="hidePanel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {login} from '../../../api/user';
import {getToken} from '../../../utils/auth';

export default {
  name: 'LoginDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data(){
    return{
      input:'',
      loading:false,
    }
  },
  methods: {
    async check(){
      this.loading=true
      let res
      try {
         res= await login({
          username:getToken().username,
          password:this.input,
        })
      }catch (e){
      }finally {
        this.loading=false
      }

      console.log(res);
      if(res.meta.status>=300) {
        this.$message.warning('验证失败')
        this.input=''
        return
      }
      this.$message.success('验证成功')
      this.hidePanel()
      this.$emit('checkSuccess')
    },
    // 利用sync进行数据双向绑定，子组件修改dialogVisible的值，并响应到父组件
    hidePanel() {
      this.$emit('update:dialogVisible', false)
    }
  },
};
</script>

<style scoped>

</style>
